.sidebar {
  padding: 12px;
  width: 260px; // 修改宽度为260px
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f0f0f0;
  background-color: #fff;

  .sidebarHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
    }
  }

  // 新增: 空间分隔线样式
  .spaceDivider {
    margin: 4px 0;
    padding: 0;
  }

  // 修改: 空间组标题样式为两端对齐
  .spaceGroupTitle {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between; // 两端对齐
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;

    :global(.anticon) {
      font-size: 12px;
    }

    // 修改: 添加团队按钮样式 - 移除边框效果
    .addTeamButton {
      padding: 0;
      height: 20px;
      width: 20px;
      min-width: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 0.45);
      border: none !important; // 确保没有边框
      outline: none !important; // 禁用点击时的轮廓线

      &:hover {
        color: #1677ff;
        background: transparent;
      }

      &:focus,
      &:active {
        color: rgba(0, 0, 0, 0.45);
        border: none !important;
        outline: none !important;
        box-shadow: none !important; // 移除任何阴影效果
      }
    }
  }

  // 新增: 创建团队空间按钮容器
  .createTeamContainer {
    padding: 8px 16px;

    .createTeamButton {
      padding: 0;
      height: auto;
      font-size: 14px;
      color: #1677ff;
      width: 100%;
      text-align: left;

      &:hover {
        background: transparent;
      }
    }
  }

  .spaceMenu {
    flex: 1;
    overflow-y: auto;
    border-right: none !important;

    // 调整菜单项高度和样式，添加上下margin以增加间距
    :global(.ant-menu-item) {
      height: 38px; // 修改高度为38px
      line-height: 38px; // 同步调整行高
      margin: 2px 0 !important; // 上下各添加2px的margin，总间距为4px
      padding: 0 16px !important; // 统一内边距

      &:hover {
        background-color: #f5f5f5;
      }
    }

    // 修改选中背景色 - 强制覆盖文字颜色
    :global(.ant-menu-item-selected) {
      background-color: rgba(69, 81, 229, 0.1) !important; // 纯色背景
      border-right: none !important; // 移除右侧边框

      // 强制文字和图标保持黑色
      .spaceName {
        color: rgba(0, 0, 0, 0.85) !important; // 使用黑色并强制应用
      }

      :global(.anticon) {
        color: rgba(0, 0, 0, 0.85) !important; // 使用黑色并强制应用
      }

      // 强制覆盖蓝色
      &:hover .spaceName,
      &:active .spaceName,
      &:focus .spaceName {
        color: rgba(0, 0, 0, 0.85) !important;
      }

      // 覆盖Ant Design按钮文字颜色
      :global(.ant-menu-title-content) {
        color: rgba(0, 0, 0, 0.85) !important;
      }
    }
  }

  .spaceItem {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .spaceIcon {
    width: 16px;
    height: 16px;
  }

  .spaceName {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
